<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三维场景</title>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>

<body>
  <script>
    window.onload = function(){
      init();
    }
    function init() {
      /* 创建场景对象 */
      let scene = new THREE.Scene();
      let customerGeometry = createCustomerGeometry2();
      translateGeometry(customerGeometry);
      let material = new THREE.MeshBasicMaterial({
        vertexColors: THREE.FaceColors,
        //side: THREE.DoubleSide, // 前面：FrontSide(默认)；背面：BackSide; 双面：DoubelSide
      });
      let mesh = new THREE.Mesh(customerGeometry,material);
      //mesh.scale.set(2, 2, 2);
      scene.add(mesh);

      /* 添加调试辅助坐标 */
      let axisHelper = new THREE.AxisHelper(250);
      scene.add(axisHelper);
      /**
       * 光源设置
       */
      //点光源
      let point = new THREE.PointLight(0xffffff);
      point.position.set(300, 400, 300); //点光源位置上  // 每个参数控制不同的面的亮度
      scene.add(point); //点光源添加到场景中
      /* 相机设置 */
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象 （正交相机，保持比例）
      let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(100, 100, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      let renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      renderer.render(scene, camera); 
      
    }
    /**
     * 通过BufferGeometry 和 BufferAttribute 定义一个6个定点的数据几何体
     */
    function createCustomerGeometry() {
      let geometry = new THREE.BufferGeometry();
      let vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标
        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
      ]);
      // 创建属性缓冲区对象
      let attribue = new THREE.BufferAttribute(vertices, 3);
      // 设置几何体attribute属性的位置属性
      geometry.attributes.position = attribue;
      console.log(geometry);
      console.log('几何体顶点位置数据',geometry.attributes.position);
      console.log('几何体位置索引数据',geometry.index);
      return geometry;
    }
    function createCustomerGeometry2(){
      let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
      // 遍历几何体的face属性
      geometry.faces.forEach(face => {
        // 设置三角面face三个顶点的颜色
        face.vertexColors = [
          new THREE.Color(0xffff00),
          new THREE.Color(0xff00ff),
          new THREE.Color(0x00ffff),
        ]
      });
      //删除最后一个三角形
      geometry.faces.shift();
      return geometry;
    }
    function translateGeometry(geometry){
      geometry.scale(2, 2, 2);
      geometry.translate(50, 0, 0);
      geometry.rotateX(Math.PI / 4);
      geometry.scale(0.5, 0.5, 0.5);
    }
  </script>
</body>

</html>